<template>
  <div class="app-container">
    <el-button type="primary" class="pan-btn blue-btn" @click="submitDimensionData">生成维度</el-button>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="120px" align="center" label="字段名称">
        <template slot-scope="{row}">
          <span>{{ row.columnName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" align="center" label="指标名称">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.dimensionName" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.dimensionName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" align="center" label="指标简称">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.dimensionCode" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.dimensionCode }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="{row,$index}">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(row)"
          >
            完成
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="row.edit=!row.edit"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { saveDimension } from '@/api/quota/define/define.js'
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: 'pretreatmentDimension',
  //使用import引入外部组件需要在components对象中注册才可以使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      list: [],
      test: null
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    confirmEdit(row) {
      row.edit = false
      this.$message({
        message: '编辑完成',
        type: 'success'
      })
    },
    submitDimensionData() {
      saveDimension(this.list).then(res => {
        if (res.data) {
          this.msgSuccess('维度生成完成')
          this.$store.dispatch('tagsView/delView', this.$router.history.current)
          this.$router.push({ path: '/quota/quotaDefine' })
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('接受到路由数据', this.$route.params)
    this.list = this.$route.params.dimension.map(v => {
      this.$set(v, 'edit', false)
      this.$set(v, 'dimensionName', '请填写维度名称')
      this.$set(v, 'dimensionCode', '请填写维度编码')
      this.$set(v, 'comments', '请填写维度描述')
      return v
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>
